<template>
	<view class="wrap">
		<view class="main" v-if="invoiceData">
			<view class="box">
				<view class="b-row">
					<view class="b-tit">开票单号</view>
					<view class="b-cont f-text" @click="onCopy(invoiceData.invoice_no)">{{invoiceData.invoice_no}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">订单金额</view>
					<view class="b-cont f-text">¥{{invoiceData.order_amount}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">开票金额</view>
					<view class="b-cont f-text">¥{{invoiceData.invoice_amount}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">抬头类别</view>
					<view class="b-cont f-text">{{invoiceData.title_type_text}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">抬头名称</view>
					<view class="b-cont f-text">{{invoiceData.title_name}}</view>
				</view>
				<view class="b-row" v-if="invoiceData.title_type === 'company'">
					<view class="b-tit">企业税号</view>
					<view class="b-cont f-text">{{invoiceData.tax_number}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">开票留言</view>
					<view class="b-cont f-text">{{invoiceData.comment}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">接收邮箱</view>
					<view class="b-cont f-text">{{invoiceData.receive_email}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">开票状态：</view>
					<view class="b-cont f-text">{{invoiceData.status_text}}</view>
				</view>
				<template v-if="invoiceData.status != 1">
					<view class="b-row">
						<view class="b-tit">处理时间：</view>
						<view class="b-cont f-text">{{timeFormat(invoiceData.invoice_time)}}</view>
					</view>
					<view class="b-row">
						<view class="b-tit">回复备注：</view>
						<view class="b-cont f-text">{{invoiceData.invoice_note}}</view>
					</view>
					<view class="b-row" v-if="invoiceData.invoice_photos.length > 0">
						<view class="b-tit">回复图片：</view>
						<view class="b-cont f-photos">
							<view class="s-item" v-for="(item, index) in invoiceData.invoice_photos" :key="index">
								<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
							</view>
						</view>
					</view>
					<view class="b-row" v-if="invoiceData.invoice_files.length > 0">
						<view class="b-tit">回复附件：</view>
						<view class="b-cont f-files">
							<view class="s-item" v-for="(item, index) in invoiceData.invoice_files" :key="index">
								<view class="s-cont" @click="onDownload(item.url)">文件{{index+1}}</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="btn-save" :class="{ disable: disable.submit }" @click="onCancel"
				v-if="invoiceData.status == 1">取消申请</view>
		</view>
		<view class="main" v-else-if="orderData">
			<view class="box">
				<view class="b-row">
					<view class="b-tit">订单金额</view>
					<view class="b-cont f-text">¥{{orderData.payment}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">开票金额</view>
					<view class="b-cont f-text">¥{{orderData.payment_rel}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">抬头类别</view>
					<view class="b-cont f-option">
						<picker @change="onFilter" data-field="title_type" :value="typeIndex" :range="typeList"
							range-key="name">
							<view class="b-main">
								<view class="s-cont">{{this.typeList[this.typeIndex].name}}</view>
								<view class="iconfont icon-more"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">抬头名称</view>
					<view class="b-cont f-input">
						<input type="text" placeholder="输入企业或个人名称" @input="onInputText" data-field="title_name" />
					</view>
				</view>
				<view class="b-row" v-if="form.title_type === 'company'">
					<view class="b-tit">企业税号</view>
					<view class="b-cont f-input">
						<input type="text" placeholder="输入企业税号" @input="onInputText" data-field="tax_number" />
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">开票留言</view>
					<view class="b-cont f-textarea">
						<textarea placeholder="选填" auto-height @input="onInputText" data-field="comment"></textarea>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">接收邮箱</view>
					<view class="b-cont f-input">
						<input type="text" placeholder="选填，电子发票将发送此邮箱" @input="onInputText"
							data-field="receive_email" />
					</view>
				</view>
			</view>
			<view class="btn-save" :class="{ disable: disable.submit }" @click="onApply">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		invoiceInfo,
		applyInvoice,
		invoiceCancel
	} from '@/service/api/order.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				orderNo: null,
				orderData: null,
				invoiceNo: null,
				invoiceData: null,
				form: {
					title_type: 'company'
				},
				disable: {
					submit: false
				},
				typeList: [{
					value: 'company',
					name: '企业'
				}, {
					value: 'other',
					name: '个人/组织'
				}],
				typeIndex: 0,
				loadingType: 1,
				loadingText: '',
			}
		},
		onLoad(options) {
			this.orderNo = options.order_no
			this.loadOrderDetail()
		},
		methods: {
			loadOrderDetail() {
				getOrderDetail(this.orderNo).then(([err, res]) => {
					console.log('getOrderDetail', err, res)
					if (!err) {
						if (res.invoice_no) {
							this.invoiceNo = res.invoice_no
							this.loadInvoiceInfo()
						} else {
							this.orderData = res
						}
					}
				})
			},
			loadInvoiceInfo() {
				invoiceInfo(this.invoiceNo).then(([err, res]) => {
					console.log('invoiceInfo', err, res)
					if (!err) {
						this.invoiceData = res
					}
				})
			},
			// 输入内容
			onInputText(e) {
				console.log('onInputText', e)
				this.form[e.target.dataset.field] = e.detail.value;
			},
			onFilter(e) {
				console.log('onFilter', e.target.dataset.field, e.detail.value)
				const field = e.target.dataset.field
				if (field === 'title_type') {
					this.typeIndex = e.detail.value
					this.form.title_type = this.typeList[this.typeIndex].value
				}
			},
			onApply() {
				if (this.disable.submit) {
					return;
				}
				if (!this.form.title_name) {
					return this.$logic.showToast('抬头名称不能为空')
				}
				if (this.form.title_type === 'company') {
					if (!this.form.tax_number) {
						return this.$logic.showToast('企业税号不能为空')
					}
				}
				this.disable.submit = true
				applyInvoice(this.orderNo, this.orderData.payment_rel, this.form).then(([err, res]) => {
					console.log('applyInvoice', err, res)
					this.disable.submit = false
					if (!err) {
						this.invoiceNo = res.invoice_no
						this.loadInvoiceInfo()
						this.$logic.showToast('提交成功')
					}
				})
			},
			onCancel() {
				if (this.disable.submit) {
					return;
				}
				this.disable.submit = true
				invoiceCancel(this.invoiceNo).then(([err, res]) => {
					console.log('applyInvoice', err, res)
					this.disable.submit = false
					if (!err) {
						this.invoiceData = null
						this.loadOrderDetail()
						this.$logic.showToast('取消成功')
					}
				})
			},
			onPreview(index) {
				let photos = []
				for (let i = 0; i < this.invoiceData.invoice_photos.length; i++) {
					photos.push(this.invoiceData.invoice_photos[i].url)
				}
				uni.previewImage({
					current: index,
					urls: photos
				})
			},
			onDownload(fileUrl) {
				uni.downloadFile({
					url: fileUrl
				}).then(([err, res]) => {
					console.log('downloadFile', err, res)
					if (!err && res.statusCode == 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true
						}).then(([err, res]) => {
							console.log('openDocument', err, res)
							if (err) {
								this.$logic.showToast('文件打开失败')
							}
						})
					} else {
						this.$logic.showToast('文件下载失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding: 0 40upx;
	}

	.box {
		margin-top: 30upx;
		background: #fff;
		border-radius: 20upx;

		.b-row {
			padding: 30upx;
			display: flex;
			justify-content: space-between;

			.b-tit {
				font-size: 28upx;
				width: 240upx;
				color: #666;
			}

			.b-cont {
				// flex: 1;
				display: flex;
				align-items: center;

				input {
					text-align: right;
				}

				textarea {
					text-align: right;
				}

				&.f-option {

					.b-main {
						display: flex;
						align-items: center;

						.s-cont {
							font-size: 28upx;
						}

						.iconfont {
							margin-left: 10upx;
						}
					}
				}

				&.f-input {
					input {
						width: 400upx;
					}
				}

				&.f-textarea {
					textarea {
						width: 400upx;
						font-size: 28upx;
					}
				}

				&.f-text {
					font-size: 28upx;
					color: #666;
				}

				&.f-photos {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.s-item {
						margin-bottom: 20upx;
						margin-right: 20upx;
						position: relative;
						width: 160upx;
						height: 120upx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						image {
							width: 160upx;
							height: 120upx;
						}
					}
				}

				&.f-files {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;

					.s-item {
						margin-bottom: 20upx;
						margin-left: 30upx;
						position: relative;
						font-size: 28upx;
						color: #666;
					}
				}
			}
		}


		input {
			font-size: 28upx;
		}

		.textarea-placeholder,
		.input-placeholder {
			font-size: 28upx;
		}
	}

	.btn-save {
		margin-top: 50upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: #DA5650;
		border-radius: 50upx;
		letter-spacing: 10upx;
	}
</style>
